{% extends 'base.html' %}
{% load static %}

{% block title %}Dashboard - Research Analyzer{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-gradient: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
        --warning-gradient: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
        --info-gradient: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
        --card-shadow: 0 10px 30px rgba(0,0,0,0.1);
        --hover-shadow: 0 15px 35px rgba(0,0,0,0.15);
    }

    .dashboard-hero {
        background: var(--primary-gradient);
        color: white;
        border-radius: 20px;
        padding: 3rem;
        margin-bottom: 2rem;
        position: relative;
        overflow: hidden;
    }

    .dashboard-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 200px;
        height: 200px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

    .stats-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: var(--card-shadow);
        transition: all 0.3s ease;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--hover-shadow);
    }

    .stats-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary-gradient);
    }

    .stats-icon {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        display: block;
    }

    .stats-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        background: var(--primary-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .quick-actions {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: var(--card-shadow);
        margin-bottom: 2rem;
    }

    .action-btn {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 1.5rem;
        text-decoration: none;
        color: #495057;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: 100%;
    }

    .action-btn:hover {
        border-color: #667eea;
        color: #667eea;
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    }

    .action-btn i {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    .recent-papers-card {
        background: white;
        border-radius: 15px;
        box-shadow: var(--card-shadow);
        overflow: hidden;
    }

    .paper-item {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #f8f9fa;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .paper-item:hover {
        background: #f8f9fa;
        padding-left: 2rem;
    }

    .paper-item:last-child {
        border-bottom: none;
    }

    .paper-title {
        font-weight: 600;
        color: #2d3436;
        margin-bottom: 0.5rem;
    }

    .paper-meta {
        font-size: 0.85rem;
        color: #636e72;
    }

    .status-badge {
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .status-completed {
        background: linear-gradient(135deg, #00b894, #00cec9);
        color: white;
    }

    .status-pending {
        background: linear-gradient(135deg, #fdcb6e, #e17055);
        color: white;
    }

    .status-processing {
        background: linear-gradient(135deg, #74b9ff, #0984e3);
        color: white;
    }

    .welcome-text {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-bottom: 1.5rem;
    }

    .dashboard-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #2d3436;
        margin-bottom: 1.5rem;
        position: relative;
        padding-left: 1rem;
    }

    .section-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 24px;
        background: var(--primary-gradient);
        border-radius: 2px;
    }

    .empty-state {
        text-align: center;
        padding: 3rem 2rem;
        color: #636e72;
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.3;
    }

    .progress-ring {
        transform: rotate(-90deg);
    }

    .progress-ring-circle {
        stroke-dasharray: 251.2;
        stroke-dashoffset: 251.2;
        transition: stroke-dashoffset 0.35s;
    }

    .insights-card {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        border-radius: 15px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        border: none;
    }

    .btn-gradient {
        background: var(--primary-gradient);
        border: none;
        border-radius: 10px;
        color: white;
        padding: 0.75rem 1.5rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Hero Section -->
    <div class="dashboard-hero">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="dashboard-title">Welcome back, {{ user.first_name|default:user.username }}!</h1>
                <p class="welcome-text">
                    Your AI-powered research companion is ready to help you analyze and understand research papers.
                    Let's explore the world of knowledge together.
                </p>
                <a href="{% url 'papers:upload' %}" class="btn btn-gradient btn-lg">
                    <i class="fas fa-upload me-2"></i>Upload New Paper
                </a>
            </div>
            <div class="col-lg-4 text-center">
                <i class="fas fa-brain" style="font-size: 5rem; opacity: 0.7;"></i>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stats-card text-center">
                <i class="fas fa-file-alt stats-icon text-primary"></i>
                <div class="stats-number">{{ total_papers }}</div>
                <h6 class="text-muted mb-0">Total Papers</h6>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stats-card text-center">
                <i class="fas fa-check-circle stats-icon text-success"></i>
                <div class="stats-number">{{ completed_analyses }}</div>
                <h6 class="text-muted mb-0">Analyzed</h6>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stats-card text-center">
                <i class="fas fa-clock stats-icon text-warning"></i>
                <div class="stats-number">{{ pending_analyses }}</div>
                <h6 class="text-muted mb-0">Pending</h6>
            </div>
        </div>
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="stats-card text-center">
                <i class="fas fa-comments stats-icon text-info"></i>
                <div class="stats-number">{{ user.qa_sessions_count|default:0 }}</div>
                <h6 class="text-muted mb-0">Q&A Sessions</h6>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <h5 class="section-title">Quick Actions</h5>
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <a href="{% url 'papers:upload' %}" class="action-btn">
                    <i class="fas fa-upload text-primary"></i>
                    <h6>Upload Paper</h6>
                    <small class="text-muted">Add new research</small>
                </a>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <a href="{% url 'papers:search' %}" class="action-btn">
                    <i class="fas fa-search text-success"></i>
                    <h6>Search Papers</h6>
                    <small class="text-muted">Find research online</small>
                </a>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <a href="{% url 'papers:comparative_analysis' %}" class="action-btn">
                    <i class="fas fa-balance-scale text-info"></i>
                    <h6>Compare Papers</h6>
                    <small class="text-muted">Analyze differences</small>
                </a>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <a href="{% url 'papers:list' %}" class="action-btn">
                    <i class="fas fa-list text-warning"></i>
                    <h6>My Papers</h6>
                    <small class="text-muted">View collection</small>
                </a>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <a href="{% url 'papers:export_csv' %}" class="action-btn">
                    <i class="fas fa-download text-danger"></i>
                    <h6>Export Data</h6>
                    <small class="text-muted">Download results</small>
                </a>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
                <a href="{% url 'users:profile' %}" class="action-btn">
                    <i class="fas fa-user-cog text-secondary"></i>
                    <h6>Settings</h6>
                    <small class="text-muted">Manage account</small>
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Recent Papers -->
        <div class="col-lg-8 mb-4">
            <div class="recent-papers-card">
                <div class="card-header bg-transparent border-0 px-4 pt-4 pb-3">
                    <h5 class="section-title mb-0">Recent Papers</h5>
                </div>
                <div class="card-body p-0">
                    {% if user_papers %}
                        {% for paper in user_papers|slice:":5" %}
                            <div class="paper-item" onclick="window.location.href='{% url 'papers:qa' paper.id %}'">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div class="flex-grow-1">
                                        <div class="paper-title">{{ paper.title|truncatechars:60 }}</div>
                                        <div class="paper-meta">
                                            <i class="fas fa-calendar me-1"></i>{{ paper.created_at|date:"M d, Y" }}
                                            {% if paper.authors %}
                                                <span class="mx-2">•</span>
                                                <i class="fas fa-user me-1"></i>{{ paper.authors|truncatechars:30 }}
                                            {% endif %}
                                        </div>
                                    </div>
                                    <span class="status-badge status-{{ paper.analysis_status }}">
                                        {{ paper.analysis_status }}
                                    </span>
                                </div>
                            </div>
                        {% endfor %}
                        
                        {% if user_papers.count > 5 %}
                            <div class="text-center p-3">
                                <a href="{% url 'papers:list' %}" class="btn btn-outline-primary">
                                    View All Papers ({{ user_papers.count }})
                                </a>
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="empty-state">
                            <i class="fas fa-file-alt"></i>
                            <h5>No Papers Yet</h5>
                            <p>Upload your first research paper to get started with AI-powered analysis.</p>
                            <a href="{% url 'papers:upload' %}" class="btn btn-gradient">
                                <i class="fas fa-upload me-2"></i>Upload Your First Paper
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- AI Insights & Tips -->
        <div class="col-lg-4 mb-4">
            <div class="insights-card">
                <h6 class="text-dark mb-3">
                    <i class="fas fa-lightbulb me-2"></i>AI Research Tips
                </h6>
                <div class="small text-dark">
                    <div class="mb-3">
                        <strong>💡 Smart Questioning:</strong>
                        <p class="mb-1">Use our question templates to get better insights from your papers.</p>
                    </div>
                    <div class="mb-3">
                        <strong>🔍 Compare & Analyze:</strong>
                        <p class="mb-1">Upload multiple papers on the same topic for comparative analysis.</p>
                    </div>
                    <div class="mb-0">
                        <strong>📊 Export Results:</strong>
                        <p class="mb-1">Save your Q&A sessions and analysis as PDF reports.</p>
                    </div>
                </div>
            </div>

            <!-- Recent Activity -->
            <div class="recent-papers-card">
                <div class="card-header bg-transparent border-0 px-4 pt-4 pb-3">
                    <h6 class="section-title mb-0">Research Progress</h6>
                </div>
                <div class="card-body text-center">
                    {% if total_papers > 0 %}
                        <div class="mb-3">
                            <svg class="progress-ring" width="120" height="120">
                                <circle class="progress-ring-circle" stroke="#667eea" stroke-width="8" 
                                        fill="transparent" r="40" cx="60" cy="60"
                                        style="stroke-dashoffset: calc(251.2 - (251.2 * {{ completed_analyses }} / {{ total_papers }}))"/>
                            </svg>
                            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                <div class="h4 mb-0">{{ completed_analyses|floatformat:0 }}/{{ total_papers }}</div>
                                <small class="text-muted">Analyzed</small>
                            </div>
                        </div>
                        <p class="text-muted small">
                            {% widthratio completed_analyses total_papers 100 %}% of your papers have been analyzed
                        </p>
                    {% else %}
                        <div class="empty-state py-3">
                            <i class="fas fa-chart-line"></i>
                            <p class="mb-0">Upload papers to see your progress</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add smooth animations for cards
    const cards = document.querySelectorAll('.stats-card, .action-btn');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 100);
            }
        });
    });

    cards.forEach(card => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = 'all 0.6s ease';
        observer.observe(card);
    });

    // Add hover effects for paper items
    document.querySelectorAll('.paper-item').forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.02)';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
});
</script>
{% endblock %}